import {Card, Button, Space, Popover, message} from "antd";
import './index.less'
import {PlusOutlined} from "@ant-design/icons";
import {useNavigate} from "react-router-dom";
import {getBookAPI, deleteBookAPI} from "../../apis/novel";
import {useEffect, useState} from "react";


const gridStyle = {
    width: '20%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    overflow: "hidden",
};

const NovelCreation = () => {

    const navigate = useNavigate();


    // 书籍列表
    const [bookList, setBookList] = useState([])

    // 获取书籍
    const getBook = async () => {
        let res = await getBookAPI()

        console.log('获取书籍', res);
        if (res.code === '0000') {
            let arr = res.data
            arr.forEach(item => {
                item.cover = 'http://p6-novel.byteimg.com/origin/novel-pic/p2oc8d0ffcff2fc135a6ec8051a93945d54'
            });
            setBookList(arr)
            message.success('获取书籍成功')
        } else {
            message.error(res.msg)
        }
    }

    useEffect(() => {
        getBook()
    }, [])

    // 删除书籍
    const deleteBook = async (bookId) => {
        let res = await deleteBookAPI(bookId)
        console.log('删除书籍', res);
        if (res.code === '0000') {
            getBook()
        } else {
            message.error(res.msg)
        }
    }

    return (
        <>
            <Card title="书架" extra={ <Button type={'primary'} onClick={() => {
                navigate('/workplace/NovelCreationDrawPage')
            }}>新增书籍</Button>}>
                {bookList.map((item, index) => {
                    return (
                        <Card.Grid key={item.bookId} style={gridStyle}>
                            <Popover content={<Button danger onClick={() => {
                                deleteBook(item.bookId)
                            }}>删除</Button>}>
                                <Space direction={'vertical'} align={'center'}>
                                    <Card
                                        onClick={() => {
                                            let novelInfo = {
                                                bookId: item.bookId,
                                                bookName: item.title
                                            }

                                            navigate('/workplace/NovelCreationDetail', {
                                                state: {
                                                    novelInfo
                                                }
                                            })
                                        }}
                                        className={'noPadding'}
                                        hoverable
                                        style={{
                                            width: '80%',
                                            overflow: "hidden",
                                        }}
                                    >
                                        <img style={{
                                            width: '100%',
                                            height: '100%',
                                        }}
                                             src={item.cover}
                                             alt={item.title}/>
                                    </Card>
                                    <h3>{item.title}</h3>
                                </Space>
                            </Popover>
                        </Card.Grid>
                    )
                })}
            </Card>
        </>
    )
}

export default NovelCreation